<template>
  <div class="card-wrapper">
    <div class="card">
      <image
        class="user-img"
        :src="'https://mini.jiaw.com/img/1948220211206.jpg'"
      ></image>
      <image
        mode="aspectFit"
        class="power-card"
        :src="'https://mini.jiaw.com/img/3214120211206.jpg'"
      ></image>
    </div>
    <div class="title">激活宠粉至尊卡 享更多优惠</div>

    <div class="form">
      <u-input
        v-model="cardNum"
        type="number"
        border
        height="100"
        :clearable="false"
        placeholder="输入宠粉至尊卡卡号"
      />
      <u-input
        v-model="cardPwd"
        border
        height="100"
        :clearable="false"
        placeholder="输入宠粉至尊卡密码（6位）"
      />
    </div>
    <button class="btn" @click="activation">激活宠粉至尊卡</button>
  </div>
</template>

<script>
import { activationCard } from '@/api'
import { mapState } from 'vuex'

export default {
  data() {
    return {
      cardNum: '',
      cardPwd: '',
      timer: ''
    }
  },
  methods: {
    activation() {
      if (!this.cardNum || !this.cardPwd) {
        uni.showToast({
          title: '请输入卡号信息!',
          icon: 'none'
        })
        return
      }
      if (this.timer) clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        activationCard(this.cardNum, this.userInfo.id, this.cardPwd).then(
          res => {
            if (res.resMsg === '激活成功') {
              uni.navigateTo({
                url: '/pages/package/member-center/component/show-powder-card'
              })
            } else {
              uni.showToast({
                title: res.resMsg + '!',
                icon: 'none'
              })
            }
          }
        )
      }, 500)
    }
  },
  computed: {
    ...mapState(['userInfo'])
  }
}
</script>

<style lang="less" scoped>
.card-wrapper {
  padding: 0 40rpx;

  .card {
    padding: 140rpx 0 40rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    .user-img {
      height: 200rpx;
      width: 200rpx;
      position: absolute;
      top: 10px;
      left: 235rpx;
    }
  }
  .title {
    text-align: center;
    font-size: 38rpx;
  }

  .form {
    u-input {
      margin: 50rpx 0;
      display: block;
    }
  }
  .btn {
    background: #f94c42;
    color: #fff;
    line-height: 100rpx;
    font-size: 30rpx;
  }
}
</style>
